<template>
  <div>
    <editor-content :editor="editor" />
    <div class="actions">
      <button @click="testBasic">基础测试</button>
      <button @click="testConvert">转换测试</button>
      <button @click="testBothFormats">两种格式测试</button>
      <button @click="clearContent">清空内容</button>
    </div>

    <div v-if="message" class="message">
      {{ message }}
    </div>
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3';
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
import { TemplateVariable, convertTemplateVariables } from './TemplateVariableNode.ts';

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
      message: '',
    };
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        Document,
        Paragraph,
        Text,
        TemplateVariable,
      ],
      content: '欢迎测试模板变量功能！',
    });
  },

  methods: {
    testBasic() {
      this.editor.commands.setContent('这是一个基础测试');
      this.message = '基础测试完成';
    },

    testConvert() {
      const content = '用户名: {{姓名}} 年龄: ${{25}}';
      this.editor.commands.setContent(content);

      setTimeout(() => {
        convertTemplateVariables(this.editor);
        this.message = '转换完成：{{}} 显示为占位符，${{}} 显示为值';
      }, 100);
    },

    testBothFormats() {
      const content = '占位符变量：{{请输入}} 值变量：${{已有值}}';
      this.editor.commands.setContent(content);

      setTimeout(() => {
        convertTemplateVariables(this.editor);
        this.message = '两种格式测试完成';
      }, 100);
    },

    clearContent() {
      this.editor.commands.clearContent();
      this.message = '内容已清空';
    },
  },

  beforeUnmount() {
    if (this.editor) {
      this.editor.destroy();
    }
  },
};
</script>

<style scoped>
.actions {
  margin: 20px 0;
}

.actions button {
  margin-right: 10px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.actions button:hover {
  background: #0056b3;
}

.message {
  margin-top: 20px;
  padding: 10px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
</style>
